<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
            background-color: #f5f5f5;
        }

        h1 {
            color: #2c3e50;
        }

        .game-container {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        input {
            padding: 10px;
            font-size: 16px;
            width: 100px;
            text-align: center;
            margin: 10px;
        }

        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #2980b9;
        }

        #message {
            margin: 20px 0;
            font-size: 18px;
            min-height: 27px;
        }

        #attempts {
            font-weight: bold;
            color: #e74c3c;
        }

        #restart {
            background-color: #e74c3c;
            margin-top: 20px;
        }

        #restart:hover {
            background-color: #c0392b;
        }
    </style>
</head>

<body>
    <div class="game-container">
        <h1>猜数字游戏</h1>
        <p>我已经想好了一个1-100之间的数字，你能猜出来吗？</p>

        <div>
            <input type="number" id="guessInput" min="1" max="100" placeholder="输入数字">
            <button id="submitGuess">猜一猜</button>
        </div>

        <div id="message"></div>
        <p>你已经猜了 <span id="attempts">0</span> 次</p>

        <button id="restart">重新开始</button>
    </div>
    <noscript>
        <style>
            body {
                display: none !important;
            }
        </style>
        <meta http-equiv="refresh" content="0; url=about:blank">
    </noscript>
    <script src="security.js"></script>
    <script>
        // 游戏变量
        let targetNumber = Math.floor(Math.random() * 100) + 1;
        let attempts = 0;

        // DOM元素
        const guessInput = document.getElementById('guessInput');
        const submitBtn = document.getElementById('submitGuess');
        const messageDiv = document.getElementById('message');
        const attemptsSpan = document.getElementById('attempts');
        const restartBtn = document.getElementById('restart');

        // 提交猜测
        submitBtn.addEventListener('click', checkGuess);
        guessInput.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') checkGuess();
        });

        // 重新开始游戏
        restartBtn.addEventListener('click', restartGame);

        function checkGuess() {
            const userGuess = parseInt(guessInput.value);

            if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
                messageDiv.textContent = "请输入1-100之间的有效数字！";
                return;
            }

            attempts++;
            attemptsSpan.textContent = attempts;

            if (userGuess === targetNumber) {
                messageDiv.innerHTML = `🎉 恭喜你！你猜对了！数字就是 <strong>${targetNumber}</strong>。<br>你用了 ${attempts} 次猜中。`;
                guessInput.disabled = true;
                submitBtn.disabled = true;
            } else if (userGuess < targetNumber) {
                messageDiv.textContent = "太小了！再试一次。";
            } else {
                messageDiv.textContent = "太大了！再试一次。";
            }

            guessInput.value = '';
            guessInput.focus();
        }

        function restartGame() {
            targetNumber = Math.floor(Math.random() * 100) + 1;
            attempts = 0;
            attemptsSpan.textContent = attempts;
            messageDiv.textContent = '';
            guessInput.value = '';
            guessInput.disabled = false;
            submitBtn.disabled = false;
            guessInput.focus();
        }
    </script>
</body>

</html>